<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px">
      <div class="formBox">
        <div class="headBox">
          <p>申请分享客条件</p>
        </div>
        <el-form-item label="分佣比率：">
          <el-radio-group v-model="form.isApply">
            <el-radio :label="0">自动成为(自动成为，不需要后台审核，但是需要设置等级条件)</el-radio>
            <el-radio :label="1">客户申请</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="formBox formBoos">
        <div class="headBox">
          <p>等级配置</p>
          <span>​以下项1天内修改仅可生效1次（当日24点前多次修改，以最后一次修改为准，次日凌晨4点后生效）</span>
        </div>
        <el-popover
          placement="top"
          width="295"
          trigger="hover"
          content="至少需勾选一项，最少满足其中一项条件就可以升级">
            <i slot="reference" class="el-icon-question"></i>
        </el-popover>
        <el-form-item label="等级条件">
          <el-checkbox-group v-model="grade" >
            <el-checkbox label="lcInviteNum" name="type">总邀请人数</el-checkbox>
            <el-checkbox label="lcConsumeNum" name="type">总消费次数</el-checkbox>
            <el-checkbox label="lcConsumeMoney" name="type">总消费金额</el-checkbox>
          </el-checkbox-group>
          <el-table
            :data="tableData"
            border
            :header-cell-style="tableHeaderStyle"
            style="width: 100%">
            <el-table-column
              prop="levelName"
              label="等级名称"
              width="220">
              <template slot-scope="scope">
                <el-input placeholder="名称" v-model="scope.row.levelName"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="220"
              v-if="grade.indexOf('lcInviteNum')!=-1"
              prop="bindSubordinateNum"
              label="总邀请人数">
              <template slot-scope="scope">
                <el-input type="number" placeholder="0" v-model="scope.row.bindSubordinateNum"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="220"
              v-if="grade.indexOf('lcConsumeNum')!=-1"
              prop="completedOrderNum"
              label="总消费次数">
              <template slot-scope="scope">
                <el-input type="number" placeholder="0" v-model="scope.row.completedOrderNum"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="220"
              v-if="grade.indexOf('lcConsumeMoney')!=-1"
              prop="completedOrderMoney"
              label="总消费金额">
              <template slot-scope="scope">
                <el-input type="number" placeholder="0" v-model="scope.row.completedOrderMoney"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="默认奖励(%)">
              <template slot-scope="scope">
               <div class="ratioBox">
                 <p>
                   <span>分享客</span>
                   <el-input class="inp" type="number" placeholder="0" v-model="scope.row.shareCustomerRatio"></el-input>
                 </p>
                 <p>
                   <span>邀请人</span>
                   <el-input class="inp" type="number" placeholder="0" v-model="scope.row.inviterRatio"></el-input>
                 </p>
               </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button v-if="scope.$index !=0" type="danger" size="small" @click="delGrade(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="success" class="addGradeCls" @click="addGrade()">添加等级</el-button>
        </el-form-item>
      </div>
      <el-form-item>
        <div class="gddw" style="display: flex;align-items: center;justify-content: center;">
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import Setting from '@/settings';
  export default {
    name:"applySet",
    data() {
      return {
        grade:['people','num','price'],
        tableData: [

        ],
        form:{},
        visible: false,
        tableHeaderStyle: Setting.tableHeaderStyle,
      }
    },
    props:{
      param:{}
    },
    watch:{
      param(val){
        console.log(val)
        this.form = val
        this.tableData = val.levelList
        if(val.lcInviteNum == 1){
          this.grade.push('lcInviteNum')
        }if(val.lcConsumeNum == 1){
          this.grade.push('lcConsumeNum')
        }if(val.lcConsumeMoney == 1){
          this.grade.push('lcConsumeMoney')
        }
      }

    },
    methods: {
      onSubmit() {
        console.log('submit!');
        if(this.grade.length == 0){
          this.$message("必修选择一项等级条件")
          return false
        }
       this.form.lcInviteNum = this.grade.indexOf('lcInviteNum')!=-1?1:0
       this.form.lcConsumeNum = this.grade.indexOf('lcConsumeNum')!=-1?1:0
       this.form.lcConsumeMoney = this.grade.indexOf('lcConsumeMoney')!=-1?1:0
        this.form.levelList = this.tableData
        this.$emit('onSubmit',this.form)
      },
      addGrade(){
        this.tableData.push(
          {
            levelName:"",
            level: this.tableData.length+1,
            bindSubordinateNum:"",
            completedOrderNum:"",
            completedOrderMoney:"",
            shareCustomerRatio:"",
            inviterRatio:""
          }
        )
      },
      delGrade(index){
        console.log(index)
        this.tableData.splice(index,1)
      }
    }
  }
</script>
<style scoped lang="scss">
  .formBox{
    padding: 30px 0;
    .headBox{
      display: flex;
      align-items: flex-end;
      margin-bottom: 15px;
      p{
        font-size: 16px;
        padding: 0;
        margin: 0;
        margin-right: 5px;
      }
      span{
        font-size: 12px;
        color: #666666;
        line-height: 22px;
        margin-left: 10px;
      }
    }
    .ratioBox{
      display: flex;
      align-items: center;
      p{
        display: flex;
        align-items: center;
        margin-right: 10px;
        margin-left: 15px;
        span{
          white-space: nowrap;
          margin-right: 10px;
        }
        .inp{
          width: 160px;
        }
      }
    }
    .addGradeCls{
      margin-top: 20px;
      margin-left: -70px;
    }
  }
  .formBoos{
    padding: 0px 0;
    position: relative;
  }
  .el-icon-question{
    color: #67b1ff;
    font-size: 18px;
    position: absolute;
    left: 25px;
    top: 46px;
  }
::v-deep .el-table--border {
    margin-left: -70px;
    margin-top: 10px;
}
::v-deep .el-table .cell{
  text-align: center;
}

.gddw{
    height: 85px;
    line-height: 85px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 210px;
    z-index: 1;
    right: 0;
    background: #ffffff;
    box-shadow: 0px -6px 10px 0px rgba(0,0,0,0.03);
}
</style>
